<template>
    <div class="order">
        <Header class="header">
            <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
            <div class="title">提交订单</div>
            <template v-slot:icon-r><i class="iconfont icon-fangzi"></i></template>
        </Header>
        <section>
            <div v-if="path.name" class='path' @click="goPath">
                <h3 class='path-title'>收货信息</h3>
                <div class='path-content'>
                    <div>
                        <span>{{ path.name }}</span>
                        <span>{{ path.tel }}</span>
                    </div>
                    <div>
                        <span>{{ path.province }}</span>
                        <span>{{ path.city }}</span>
                        <span>{{ path.county }}</span>
                        <span>{{ path.addressDetail }}</span>
                    </div>
                    <div class="default" v-if="path.isDefault">[默认]</div>
                </div>
            </div>
            <div v-else class="noPath" @click="goAddPath">点击添加收货地址</div>
            <div class='payment'>
                <div class='payment-title'>支付方式：</div>
                <van-radio-group v-model="radioPayment">
                    <van-radio name="wx">微信支付</van-radio>
                    <van-radio name="ali">支付宝支付</van-radio>
                </van-radio-group>
            </div>
            <div class='goods'>
                <ul>
                    <li v-for='(item, index) in goodsList' :key='index'>
                        <div>
                            <img :src="item.goods_imgUrl" alt="">
                        </div>
                        <div class='goods-content'>
                            <h4>{{ item.goods_name }}</h4>
                            <div class='goods-total'>
                                <span>¥{{ total.price }}</span>
                                <span>x{{ total.num }}</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
        <footer>
            <div class='total'>
                <div>
                    共
                    <span class='total-active'>{{ total.num }}</span>
                    件，
                </div>
                <div>
                    <span>总金额：</span>
                    <span class='total-active'>{{ total.price }}</span>
                </div>
            </div>
            <div class='order' @click="goPayment">提交订单</div>
        </footer>
    </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { mapGetters ,mapState,mapMutations} from 'vuex'
import { RadioGroup, Radio ,Toast} from 'vant'
import qs from 'qs'
export default {
    components: {
        Header,
        [RadioGroup.name]:RadioGroup,
        [Radio.name]:Radio
    },
    data() {
        return {
            path:{},
            radioPayment:'wx',
            orderId:'',
            total:{
                price:0,
                num:0
            },
            goodsList:[]
        }
    },
    computed: {
        ...mapGetters(['defaultPath']),
        ...mapState({
            selectList:state=>state.cart.selectList
        })
    },
    watch: {},
    methods: {
        ...mapMutations(['initData']),
        goBack() {
            this.$router.back()
        },
        //查询收货地址
        getData() {
            this.$axios({
                url: '/api/selectAddress',
                method: 'post',
                headers: {
                    token: true
                }
            }).then(res => {
                if (!res) return
                let data = res.data.data
                this.initData(data)
                if(this.defaultPath.length){
                    this.path = this.defaultPath[0]
                    let newPath = JSON.parse(localStorage.getItem('selectPath'))
                    if(newPath){
                        this.path = newPath
                    }
                }
            })
        },
        //查询订单信息
        getOrder(){
            this.$axios({
                url:'/api/selectOrder',
                method:'post',
                data:{
                    orderId:this.orderId
                },
                headers:{
                    token:true
                }
            }).then(res=>{
                if(!res) return
                this.total.num = res.data.data.order_num
                this.total.price = res.data.data.order_price
            })
        },
        //修改购物车状态,清空购物车
        goPayment(){
            if(!this.path) return Toast('请填写收货地址')
            this.$axios({
                url:'/api/submitOrder',
                method:'post',
                headers:{
                    token:true
                },
                data:{
                    orderId:this.orderId,
                    shopArr:JSON.stringify(this.selectList)
                }
            }).then(res=>{
                if(!res) return
                let newArr = this.goodsList.map(v=>{
                    return v.goods_name
                })
                //支付传递的参数
                let dataOrder = {
                    orderId:this.orderId,
                    name:newArr.join(''),
                    price:this.total.price
                }
                //去支付
                if(res.data.code == 200){
                    this.$axios({
                        url:'/api/payment',
                        method:'post',
                        headers:{
                            token:true,
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        data: qs.stringify(dataOrder)
                    }).then(res=>{
                        if(!res) return
                        Toast(res.data.data.msg)
                        window.location.href = res.data.data.paymentUrl
                    })
                }
            })
        },
        //选择收货地址
        goPath(){
            this.$router.push({name:'path',query:{type:'select'}})
        },
        //跳转新增地址
        goAddPath(){
            this.$router.push({ name: 'setPath',query:{type:'addPath',page:1} })
        }
    },
    created() {
    },
    mounted() { },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    activated() {
        this.getData()
        this.goodsList = JSON.parse(this.$route.query.detail)
        this.orderId = JSON.parse(localStorage.getItem('orderId'))
        this.getOrder()
     }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.order {
    .header {
        ::v-deep .icon-fanhui {
            font-size: .56rem;
        }

        .icon-fangzi {
            font-size: .9333rem;
        }

        ::v-deep .icon-r {
            margin-top: -0.1333rem;
        }

        ::v-deep .icon-l {
            padding-left: .08rem;
            width: auto;
        }

        .title {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 20%);
            color: #fff;
        }
    }

    section {
        height: calc(100vh - 2.9333rem);
        background-color: #F7F7F7;
        overflow: scroll;

        .noPath{
            text-align: center;
            padding: .5333rem 0;
        }
        .path-title {
            padding: 0.4rem;
            font-size: 0.48rem;
        }

        .path-content {
            position: relative;
            padding: 0.16rem 0.4rem;
            font-size: 0.373333rem;
            background-color: #FFFFFF;

            span {
                padding: .2133rem 0.16rem .2133rem 0;
            }
            .default{
                position: absolute;
                right: .5333rem;
                top: 50%;
                transform: translateY(-50%);
                color: #b0352f;
            }
        }

        .payment {
            padding: 0.16rem 0.4rem;
            margin-top: 0.4rem;
            font-size: 0.426666rem;
            background-color: #FFFFFF;

            .van-radio-group {
                display: flex;
                padding: 0.16rem 0;

                .van-radio {
                    padding-right: 0.266666rem;
                }
            }
        }

        .goods {
            padding: 0.16rem 0.4rem;
            margin-top: 0.4rem;
            font-size: 0.426666rem;
            background-color: #FFFFFF;

            ul {
                width: 100%;

                li {
                    display: flex;
                    width: 100%;

                    img {
                        width: 1.973333rem;
                        height: 1.973333rem;
                    }

                    .goods-content {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        padding-left: 0.4rem;

                        .goods-total {
                            display: flex;
                            justify-content: space-between;
                        }
                    }
                }
            }
        }
    }

    footer {
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.28rem;
        width: 100%;
        left: 0;
        z-index: 999;
        background-color: #fff;
        bottom: 0;
        border-top: 0.053333rem solid #ccc;

        .total {
            display: flex;
            font-size: .3733rem;
            padding-left: .5333rem;

            .total-active {
                color: #b0352f;
                font-size: .48rem;
            }
        }

        .order {
            width: 3.2rem;
            line-height: 1.28rem;
            color: #fff;
            text-align: center;
            font-size: .48rem;
            background-color: #b0352f;
        }
    }
}
</style>
